<template>
  <!-- 消息分组修改-->
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1024px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="editForm" :model="editForm" :rules="rules" label-width="110px">
      <!--消息分组修改-->
      <el-card class="form-card msgGroup-card">
        <div slot="header" class="label-header-msg">
          <span>消息分组信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="消息分组名称" prop="groupNm">
              <el-input
                v-model="editForm.groupNm"
                placeholder="消息分组名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启用标识" prop="isUse">
              <el-select
                v-model="editForm.isUse"
                placeholder="启用标识"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dictMap.ON_OFF_STATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="录入操作员" prop="creator">
              <el-input
                v-model="editForm.creator"
                placeholder="录入操作员"
                :disabled = "true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间" prop="createdTime">
              <el-date-picker
                style="width: 100%"
                v-model="editForm.createdTime"
                value-format="yyyyMMddHHmmss"
                type="datetime"
                :disabled = "true"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--消息分组成员管理-->
      <el-card class="list-card msgGroup-user">
        <div slot="header" class="label-header-msg">
          <span>消息分组成员管理</span>
        </div>


        <div class="discountReceipt-pick-operate-box">
          <div class="operate-box-top">
            <div class="top-content">
        <ht-search-form
          v-show="showSearch"
          :dictMap="dictMap"
          :labelWidth=100
          :queryParams="queryParams"
          :outputQueryParams="queryParams"
          :formOptions="formOptions"
          :advOptions="[]"
          :defaultEventKey="EditDialogEventKey"
        ></ht-search-form>
      </div>
      </div>
        <div class="operate-box-bottom">
          <div class="bottom-content">
        <ht-table
        ref="dataTable"
        :showSerialNumber="false"
        :multi-select="false"
        :reqConfig="reqConfig"
        :queryParams="queryParams"
        :tableBindColumns="tableBindColumns"
        :opButtonList="opButtonList"
        :dictMap="dictMap"
        :defaultEventKey="EditDialogEventKey"
        >
        <template v-slot:operate>
        <el-table-column
          label="操作"
          align="left"
          width="130px"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <ht-button-group
              :buttonList="[
                {
                  label: '取消',
                  visible: scope.row.optType==='03',
                  doFunc: () => {
                    cancelGroupUser(scope.row);
                  },
                },
                {
                  label: '删除',
                  visible: scope.row.optType==='02'||scope.row.optType==='01',
                  doFunc: () => {
                    del(scope.row);
                  },
                },
              ]"
            />
          </template>
        </el-table-column>
      </template>
        </ht-table>
      </div>
      </div>
      </div>
      </el-card>
    </el-form>
    <user-select-dialog ref="userSelectDialog" @confirm="confirmUser"></user-select-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">提 交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { msgGroupDetail,msgGroupUpdate,searchGroupUserUrlConfig,confirmUserSelect,groupUserCancel,groupUserDelete} from "@/api/cnaps/bizMng/msgGroup.js";
import { listPageMixin } from "@/libs/listPageMixin";
import UserSelectDialog from "@/views/components/UserSelectDialog";

export default {
  name: "msgGroupEditDialog",
  mixins: [listPageMixin],
  components: {
    UserSelectDialog,
  },
  data() {
    return {
      reqConfig: searchGroupUserUrlConfig,
      EditDialogEventKey: "",
      groupId: "",
      // 查询参数
      queryParams: {
        groupId: "",
        loginName: "",
        userName: "",
      },
      title: "",
      // 是否显示弹出层
      openState: false,
      // 字段可编辑控制

      //数据字典
      searchFormDictList: [
       "ON_OFF_STATUS",
       "GROUP_OPT_TYPE",
      ],
      // 表单参数
      editForm:{},
      formOptions: [],
      // 表单校验
      rules: {
        groupNm: [{ required: true, message: "请输入消息分组名称", trigger: "blur" }],
        isUse: [{ required: true, message: "请选择启用标识", trigger: "blur" }],
      },
      opButtonList: () => {
        return [
        {
            label: "添加",
            type: "primary",
            icon: "el-icon-plus",
            actionType: 'add',
            clickFun: () => {
              this.addUser();
            }
          },
        ];
      },
      tableBindColumns: [
        { label: `登录名称`, prop: "loginName", width: "160px" ,align: "center"},
        { label: `用户名`, prop: "userName", width: "160px" ,align: "center" },
        { label: `手机号码`, prop: "phoneNumber", width: "160px" ,align: "center"},
        { label: `邮箱`, prop: "email", width: "160px" ,align: "center"},
        { label: `操作标识`, prop: "optType", width: "160px", align: "center", dictCode: "GROUP_OPT_TYPE" },
      ],
    };
  },
  mounted() {
    this.formOptions = [
      {
        type: "input",
        prop: "loginName",
        defaultAttr: {
          label: "登录名称",
          placeholder: "请输入登录名称",
        },
      },
      // {
      //   type: "input",
      //   prop: "userName",
      //   defaultAttr: {
      //     label: "用户名",
      //     placeholder: "请输入用户名",
      //   },
      // },
      {
        type: "dict",
        dict: "GROUP_OPT_TYPE",
        prop: "optType",
        defaultAttr: {
          label: "操作标识",
          placeholder: "请选择操作标识",
        },
      },
    ];
  },
  methods: {
    /** todo 查询当天操作员的交易记录 */
    getList() {
      this.doQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 表单重置
    reset() {
      this.resetForm("editForm");
      this.$set(this, "editForm", {});
    },
    // 关闭回掉
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.reset();
          done();
        })
        .catch(_ => {});
    },
    show(row) {
      this.editForm = row;
      this.title = "消息分组修改";
      this.openState = true;
      this.groupId = row.groupId;
      this.queryParams.groupId = row.groupId;
      this.$set(this.queryParams,"loginName","");
      this.$set(this.queryParams,"optType","");
      this.msgGroupDetail(row);

      if(this.$refs.dataTable) {
        this.$refs.dataTable.doQuery();
        this.$refs.dataTable.genQuickButtonList(this.opButtonList());
      }
    },

    msgGroupDetail: function(row) {
      msgGroupDetail(row).then(response => {
          this.editForm = response.result.data;
        })
    },

    /** TODO提交按钮 */
    submitForm: function() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          this.submit();
        }
      });
    },

    //表单提交
    submit() {
      msgGroupUpdate(this.editForm).then(res => {
        if (res.code === 'S') {
          this.msgSuccess("提交成功");
          this.cancel();
        }
      });
    },

    //表单关闭
    cancel() {
      this.openState = false;
      this.reset();
      this.$emit("editComplete", true);
    },

    //添加消息分组用户
    addUser() {
      console.log("this.$refs.userSelectDialog", this.$refs.userSelectDialog);
      this.$refs.userSelectDialog.show(this.groupId);
    },

    //确定选择用户
    confirmUser(fromFlag, row) {
      row.groupId = this.groupId;
      confirmUserSelect(row).then(res => {
        if (res.code === 'S') {
          this.msgSuccess("提交成功");
          this.getList();
        }
      });
    },

    cancelGroupUser(row) {
      this.$confirm("确认取消删除该条分组用户信息?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return groupUserCancel(row);
        })
        .then(() => {
          this.handleQuery();
          this.msgSuccess("取消删除成功");
        })
        .catch(action => {});
    },

    del(row) {
      this.$confirm("确认删除该条分组用户信息?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return groupUserDelete(row);
        })
        .then(() => {
          this.handleQuery();
          this.msgSuccess("删除成功");
        })
        .catch(action => {});
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
